<template>
  <div class="related-order-box">
    <select-with-user-load
      ref="mengliSuppliers"
      v-model="selectItem"
      :hide-select-list="selectItem && JSON.stringify(selectItem) !== '{}' ?[selectItem] : []"
      :loadmore-method="getSupplierList()"
      :clearable="true"
      :style="styleSet"
      :key-name="keyName"
      placeholder="请选择"
      value-type="object"
      label-name="supplierName"
      extend-class="image"
      filterable
      collapse-tags
      @change="suppliersChange"
      @clear="suppliersChange"/>
  </div>
</template>
<script>
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { getSupplierList } from '@/api/commerce';
export default {
  name: 'CommerceSuppliersLoad',
  components: { SelectWithUserLoad },
  props: {
    options: { // 选中项， {id: '', supplierName: '' }
      type: Object,
      default: () => {}
    },
    styleSet: {
      type: String,
      default: ''
    },
    keyName: {
      type: String,
      default: 'id'
    }
  },
  data() {
    return {
      selectItem: ''
    };
  },
  watch: {
    options: {
      handler(value) {
        this.selectItem = value[this.keyName] === '' ? { [this.keyName]: '', supplierName: '' } : value;
      },
      deep: true
    }
  },
  created() {
    this.selectItem = this.options[this.keyName] === '' ? { [this.keyName]: '', supplierName: '' } : this.options;
  },
  methods: {
    /**
     * 获取下拉数据
     */
    // 获取电商供应商
    getSupplierList() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          getSupplierList(params).then(res => {
            const data = res;
            resolve(data);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    suppliersChange(data = { [this.keyName]: '', supplierName: '' }) {
      this.$emit('suppliersChange', data);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
